<template>
	<div class="print-container">
		<div class="header">{{ headerTitle }}</div>
		<div class="questions-wrapper">
			<!-- 使用两种不同的容器 -->
			<template v-for="(v, index) in question" :key="index">
				<!-- 代码题使用特殊容器 -->
				<div v-if="v.type === '代码'" class="code-question">
					<Question :question="v" :index="index" />
				</div>
				<!-- 非代码题使用普通容器 -->
				<div v-else class="normal-question">
					<questionselect :question="v" :index="Number(index)" />
				</div>
			</template>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';
import { asyncgetquestiontopdf } from '../api';
import Studycodemodel from '../mysql_interface/studycodemodel';
import { dealy } from '../util/time';
import Question from './question.vue';
import questionselect from './questionselect.vue';

const question = ref<Array<Studycodemodel.Iquestion | Studycodemodel.Imatchquestion>>([])

const headerTitle = ref()
onMounted(() => {
	const params = (new URL(location)).searchParams;
	const activityid = params.get('activityid');
	const questionbankid = params.get('questionbankid');
	const title = params.get('title');
	document.title = title ? title : '比赛题目'
	headerTitle.value = title ? title : '比赛题目'
	asyncgetquestiontopdf({ activityid, questionbankid }).then((data) => {
		question.value = data
		// 专题需要排序
		if (questionbankid) {
			question.value = data.sort((a, b) => {
				const aIndex = a.questionquestionbank?.[0]?.sortindex ?? 0;
				const bIndex = b.questionquestionbank?.[0]?.sortindex ?? 0;
				return aIndex - bIndex;
			})
		}
		ElMessageBox.confirm("是否保存为PDF?", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "error",
		}).then(e => {
			dealy(3000).then(() => {
				window.print()
			})
		})
		// nextTick(() => {
		//   (window as any).html2canvas(document.querySelector('#app'), {
		//     onrendered: function (canvas: any) {
		//       console.log(canvas)
		//       const pageData = canvas.toDataURL('image/jpeg', 1.0);
		//       const pdf = new (window as any).jsPDF()
		//       pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
		//       pdf.save('a4.pdf')
		//     }
		//   });
		// })
	})

})
</script>

<style scoped>
.print-container {
	padding: 20px;
	/* max-width: 210mm; */
	/* A4宽度 */
	margin: 0 auto;
}

.header {
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 26px;
	color: #333;
}

.questions-wrapper {
	display: block;
}

.code-question,
.normal-question {
	/* margin-bottom: 10px; */
}

.normal-question {
	padding: 10px 0;
}

/* 仅代码题目强制分页 */
@media print {
	.code-question {
		page-break-before: always !important;
		/* 现代浏览器支持 */
		break-before: page !important;
	}

	/* 确保所有题目内容不跨页 */
	.question-container {
		/* padding: 10px 0; */
		page-break-inside: avoid;
	}

	/* 设置默认纵向打印 */
	@page {
		/* 明确指定 纵向 */
		/* size: portrait; */
	}
}
</style>
<style>
p {
	margin-bottom: 0 !important;
}
</style>